<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <link rel="stylesheet" href="../CSS/register-css.css">
    <link rel="stylesheet" href="../CSS/font-awesome.min.css">
</head>
<script src="../js/jquery-3.4.1.min.js"></script>

<body>
<div class="main-div">
    <div class="register-div">
        <div class="logo-div"></div>
        <div class="form-div">
            <div class="parcel-div">
                <form action="${pageContext.request.contextPath}/user?method=createUser" method="post" class="form1" onsubmit="return false;">
                    <div class="account-div">
                        <div class="parcel-div">
                            <span class="fa fa-user-o fa-lg"></span>
                        </div>
                        <input class="account-input" type="text" name="userCode" value="${userCode}" placeholder="请输入用户名" autocomplete="off">
                    </div>
                    <div class="account-tip-div errorClass">${userCode_tip}</div>
                    <div class="pwd-div">
                        <div class="parcel-div">
                            <span class="fa fa-lock fa-lg"></span>
                        </div>
                        <input class="pwd-input" type="password" name="newPassword" value="${newPassword}" placeholder="请输入密码">
                    </div>
                    <div class="pwd-tip-div errorClass">${newPwd_tip}</div>
                    <div class="again-pwd-div">
                        <div class="parcel-div">
                            <span class="fa fa-lock fa-lg"></span>
                        </div>
                        <input class="rePwd-input" type="password" name="rePassword" value="${rePassword}" placeholder="请再次输入密码">
                    </div>
                    <div class="again-pwd-tip-div errorClass">${rePwd_tip}</div>
                    <div class="verification-div">
                        <input id="verify-input" type="text" name="verify" placeholder="验证码">
                        <img  class="verify" src="${pageContext.request.contextPath}/user?method=creatCode">
                    </div>
                    <div class="verification-tip-div errorClass">${verify_tip}</div>
                    <div class="button-div">
                        <button type="submit">Sign in</button>
                    </div>
                    <div class="text-div">
                        <span>已注册可</span><a href="login.jsp">直接登录</a>
                    </div>
                </form>
            </div>
            <!-- 注册成功 -->
            <div class="registerSuccess">
                <span>注册成功</span>
            </div>
            <!-- 请返回登录页 -->
            <div class="backToLogin">
                <span>请返回登录页</span>
            </div>
        </div>
    </div>
</div>
</body>
<%--<script src="../js/register-js.js"></script>--%>
<script>
    <c:if test="${flag_register == 1}">
    window.setTimeout(function () {
        $(".registerSuccess").css("display", "block");
        window.setTimeout(function () {
            $(".registerSuccess").css("display", "none");
        }, 2500);
    }, 500);

    window.setTimeout(function () {
        $(".backToLogin").css("display", "block");
        window.setTimeout(function () {
            $(".backToLogin").css("display", "none");
        }, 2500);
    }, 3500);
    ${flag_register = 0}
    </c:if>

    $(function(){
        $(".verify").click(function () {
            $(this).attr("src","${pageContext.request.contextPath}/user?method=creatCode&c="+Math.random());
        });
        $(".account-input").blur(function () {
            if($(this).val()==""){
                $(".account-tip-div").text("请输入账号");
            }else{
                $.ajax({
                    url: "${pageContext.request.contextPath}/user?method=selectUser",
                    type: "POST",
                    data: $(".form1").serialize(),
                    success: function (message) {
                        if (message=="1") {
                            $(".account-tip-div").text("账号已存在！");
                        }else{
                            $(".account-tip-div").text("");
                        }
                    },
                    error: function (jqXHR) {
                        alert("失败!");
                    }
                });
            }
        });
        $(".pwd-input").blur(function () {
            if($(this).val()==""){
                $(".pwd-tip-div").text("请输入密码");
            }else{
                $(".pwd-tip-div").text("");
            }
        });
        $(".rePwd-input").blur(function () {
            if($(this).val()==""){
                $(".again-pwd-tip-div").text("请再次输入密码");
            }else if($(this).val()!=$(".pwd-input").val()){
                $(".again-pwd-tip-div").text("密码不一致");
            }else{
                $(".again-pwd-tip-div").text("");
            }
        });
        $("#verify-input").blur(function () {
            if($(this).val()==""){
                $(".verification-tip-div").text("请输入验证码");
            }else{
                $(".verification-tip-div").text("");
            }
        });
        $(".button-div").click(function(){
            if($(".account-input").val()==""){
                $(".account-tip-div").text("请输入账号");
            }
            if($(".pwd-input").val()==""){
                $(".pwd-tip-div").text("请输入密码");
            }
            if($(".rePwd-input").val()==""){
                $(".again-pwd-tip-div").text("请再次输入密码");
            }
            if($("#verify-input").val()==""){
                $(".verification-tip-div").text("请输入验证码");
            }
            if($(".account-input").val()!=""){
                $(".account-tip-div").text("");
            }
            if($(".pwd-input").val()!=""){
                $(".pwd-tip-div").text("");
            }
            if($(".rePwd-input").val()!=""){
                $(".again-pwd-tip-div").text("");
            }
            if($("#verify-input").val()!=""){
                $(".verification-tip-div").text("");
            }
            if($(".pwd-input").val()!=""&&$(".account-input").val()!=""&&$(".rePwd-input").val()!=""&&$(".verify-input").val()!=""&&$(".rePwd-input").val()==$(".pwd-input").val()){
                $(".form1")[0].submit();
            }else if($(".rePwd-input").val()!=$(".pwd-input").val()){
                $(".again-pwd-tip-div").text("两次密码不一致");
            }
        });
    });
</script>

</html>